import React, { useState , useEffect } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

// 副作用函数演示
function Index() {
    // useEffect(()=>{
    //     console.log('useEffect=>老弟，你来了！Index页面')
    //     return ()=>{
    //         console.log("unmount组件卸载")
    //     }
    // },[]
    // )
    return <h2>index.Page</h2>;
}
  
function List() {
    // useEffect(()=>{
    //     console.log('useEffect=>老弟，你来了！List页面')
    //     return ()=>{
    //         console.log("unmount组件卸载")
    //     }
    // }
    // )
    return <h2>List-Page</h2>;
}


function Example(){
    const [ count , setCount ] = useState(0);
    const [ number , setNumber ] = useState(0);
    useEffect(()=>{
        console.log(`useEffect=>You clicked ${count} times`)
        return ()=>{
            console.log('unmount解绑的时候执行')
        }
    },[]
    )

    return (
        <div>
            {/* <p>You clicked {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>click me</button>
            <button onClick={()=>{setNumber(number+1)}}>click me</button> */}
            <Router>
                <ul>
                    <li> <Link to="/">首页</Link> </li>
                    <li><Link to="/list/">列表</Link> </li>
                </ul>
                <Route path="/" exact component={Index} />
                <Route path="/list/" component={List} />
            </Router>
        </div>
    )
}
export default Example;